<template>
  <!-- 任务明细 二次外呼明细 -->
  <div>
    <el-card>
      <div class="page-title">
        <span>{{ $route.query.flag == '1' ? '任务明细' : '二次外呼明细' }}</span>
      </div>
    </el-card>

    <el-card style="margin-top: 20px;">
      <div style="margin-left: 10px;margin-bottom: 5px;"><span>任务名称：{{ $route.query.taskName }}</span><span
        style="margin-left: 48px">外呼任务状态：</span>
        <el-tag v-if="$route.query.taskState == '1'" class="el-tag-1">待执行</el-tag>
        <el-tag v-if="$route.query.taskState == '2'" class="el-tag-2">执行中</el-tag>
        <el-tag v-if="$route.query.taskState == '3'" class="el-tag-3">已暂停</el-tag>
        <el-tag v-if="$route.query.taskState == '4'" class="el-tag-4">已终止</el-tag>
        <el-tag v-if="$route.query.taskState == '5'" class="el-tag-5">已完成</el-tag>
      </div>
      <el-form ref="queryForm" :model="queryForm" size="small">
        <el-row style="display: flex;flex-wrap: wrap;">
          <el-col :lg="6" :md="8" :sm="12" :xs="24" style="padding: 0;">
            <el-form-item prop="cusNumber">
              <el-input v-model="queryForm.cusNumber" clearable placeholder="请输入手机号/客户昵称/备注名"
                        style="width: 100%;"
                        suffix-icon="el-icon-search"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="8" :sm="12" :xs="24" style="padding: 0;">
            <el-form-item prop="intentLevel">
              <el-select v-model="queryForm.intentLevel" clearable placeholder="客户意向" style="width: 100%;">
                <el-option v-for="item in intentLevelList" :key="item.dictValue" :label="item.dictLabel"
                           :value="item.dictLabel"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="8" :sm="12" :xs="24" style="padding: 0;">
            <el-form-item prop="wxAddStatus">
              <el-select v-model="queryForm.wxAddStatus" clearable placeholder="微信添加状态" style="width: 100%;">
                <el-option v-for="item in wxAddStatusList" :key="item.dictValue" :label="item.dictLabel"
                           :value="item.dictValue"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="8" :sm="12" :xs="24" style="padding: 0;">
            <el-form-item>
              <div style="float: right;">
                <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">查 询</el-button>
                <el-button icon="el-icon-refresh" plain size="mini" type="info" @click="handleReset">重 置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px;">
      <div style="float: right;margin-bottom: 15px;">
        <el-button v-has-permi="['admin:hklink:send']" :disabled="multipleSelection.length == 0" plain size="mini"
                   type="info" @click="sendHKLink(multipleSelection, '2')">批量发送引流链接
        </el-button>
        <!-- multipleSelection.length == 0 -->
        <el-button v-if="$route.query.flag == '1'" v-has-permi="['admin:friend:add']"
                   :disabled="reAdds" plain size="mini" type="info" @click="reAdd(multipleSelection)">批量重新添加
        </el-button>
        <el-button v-has-permi="['admin:ioctask:export']" size="mini" type="primary"
                   @click="downloadFile">导出当前页
        </el-button>
      </div>
      <el-table ref="multipleTable" v-loading="loading" :data="tableList" height="442px" style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column align="center" label="手机号" min-width="110" prop="mobile"/>
        <el-table-column align="center" label="客户昵称" prop="cusNickName"/>
        <el-table-column align="center" label="备注名" prop="cusRemarkName"/>
        <el-table-column align="center" label="通话时长" prop="callDuration"/>
        <el-table-column align="center" label="挂断状态" min-width="160px" prop="hangUpStatus"/>
        <el-table-column align="center" label="通话轮次" prop="callRound"/>
        <el-table-column align="center" label="客户意向" min-width="120" prop="cusIntention">
          <!--          <template slot-scope="scope">-->
          <!--            {{-->
          <!--              scope.row.cusIntention ? intentLevelList.find(item => item.dictValue == scope.row.cusIntention).dictLabel : ''-->
          <!--            }}-->
          <!--          </template>-->
        </el-table-column>
        <!-- pathName == 'secondaryOutboundDetail' -->
        <el-table-column v-if="$route.query.flag == '1'" align="center" label="微信添加状态" min-width="100"
                         prop="wxAddStatus">
          <slot slot-scope="scope">
            <el-tag v-if="scope.row.wxAddStatus == '0'" class="el-tag-1">未添加</el-tag>
            <el-tag v-if="scope.row.wxAddStatus == '1'" class="el-tag-2">已请求</el-tag>
            <el-tag v-if="scope.row.wxAddStatus == '2'" class="el-tag-3">添加成功</el-tag>
            <el-tag v-if="scope.row.wxAddStatus == '3'" class="el-tag-4">添加失败</el-tag>
          </slot>
        </el-table-column>
        <el-table-column v-if="$route.query.flag == '1'" align="center" label="微信添加人" min-width="90"
                         prop="digitalEmployeesName"/>
        <el-table-column v-if="$route.query.flag == '1'" align="center" label="微信添加时间" min-width="100"
                         prop="wxAddTime"/>
        <!-- <el-table-column v-if="pathName == 'secondaryOutboundDetail'" label="" prop="" align="center" /> -->
        <el-table-column align="center" label="外呼结束时间" min-width="170" prop="outCallTime"/>
        <el-table-column align="center" label="企微请求时间" min-width="170" prop="coeSendTime"/>
        <el-table-column align="center" label="是否已发送引流链接" min-width="140" prop="linkSendFlag"/>
        <el-table-column align="center" fixed="right" label="操作" min-width="180px">
          <template slot-scope="{ row }">
            <!-- 1，并且是A类 -->
            <el-button v-if="$route.query.flag == '1' && row.wxAddStatus == 1 && row.intentLevel == 'A'"
                       v-has-permi="['admin:friend:add']" size="mini"
                       type="text" @click="reAdd([row])">重新添加
            </el-button>
            <el-button v-if="['2'].indexOf(row.wxAddStatus) > -1" size="mini" type="text"
                       @click="sendHKLink(row.taskDetailNo, '1')">发送引流链接
            </el-button>
            <el-button v-if="row.fullAudioUrl" size="mini" type="text" @click="showAudo(row.fullAudioUrl)">通话记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></NormalPagination>
    </el-card>

    <el-dialog :visible.sync="sendVisible" title="发送引流链接" top="15% !important" width="300px">
      <div style="text-align: center;height: 50px;line-height: 50px;">
        <i class="el-icon-question" style="color: #082aff;margin-right: 10px;"></i><span>确定发送引流链接至客户？</span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="sendVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitSend">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :before-close="beforeCloseDialog" :visible.sync="audoVisible" title="播放通话记录" top="15% !important"
               width="300px">
      <div style="text-align: center;height: 50px;line-height: 50px;">
        <video ref="vueMiniPlayer" controls style="width: 100%; height: 100%">
          <source :src="fullAudioUrl" type="video/mp4"/>
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {downLoadFile} from "@/utils/common";
import {queryDetailList, queryReDetailList, sendHkLink, sendWxAdd} from "@/api/intelligentOutCall";
import moment from "moment";

export default {
  name: 'DetailedTasks',
  data() {
    return {
      sendVisible: false,
      audoVisible: false,
      loading: false,
      reAdds: true,
      reAddLoading: false,
      queryFrom: {
        cusNumber: '',
        intentLevel: '',
        wxAddStatus: '',
        pageNum: 1,
        pageSize: 20,
      },
      total: 0,
      intentLevelList: [
        {dictValue: 'A', dictLabel: '同意加微信'},
        {dictValue: 'B', dictLabel: '意向一般'},
        {dictValue: 'C', dictLabel: '已经加微信'},
        {dictValue: 'D', dictLabel: '不同意加微信'},
        {dictValue: 'E', dictLabel: '未接通'},
        {dictValue: 'F', dictLabel: '停机空号'},
        {dictValue: 'G', dictLabel: '客户忙'},
        {dictValue: 'H', dictLabel: '快速挂机'},
      ],
      wxAddStatusList: [
        {dictValue: '0', dictLabel: '未添加'},
        {dictValue: '1', dictLabel: '已请求'},
        {dictValue: '2', dictLabel: '添加成功'},
        {dictValue: '3', dictLabel: '添加失败'},
      ],
      tableList: [],
      multipleSelection: [],
      queryForm: {},
      fullAudioUrl: '',
      sendHKLinks: {},
    }
  },
  created() {
    this.handleQuery()
  },
  methods: {
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    handleReset() {
      this.queryForm = {
        cusNumber: '',
        intentLevel: '',
        wxAddStatus: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.getListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getListFn()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getListFn()
    },
    handleSelectionChange(val) {
      // val[0] && (val[0].wxAddStatus = 1,val[0].intentLevel = 'A')
      // val[1] && (val[1].wxAddStatus = 1,val[1].intentLevel = 'B')
      // val[2] && (val[2].wxAddStatus = 1,val[2].intentLevel = 'A')
      this.multipleSelection = val;
      console.log(val);
      this.reAdds = !(val.length > 0 && val.every(row => row.wxAddStatus == 1 && row.intentLevel == 'A'))
    },
    getListFn() {
      let obj = {
        ...this.queryForm,
        taskNo: this.$route.query.id,
      }
      if (this.$route.query.flag == '1') {
        queryDetailList(obj).then(res => {
          this.tableList = res.rows || []
          this.total = res.total || 0
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      } else if (this.$route.query.flag == '2') {
        queryReDetailList(obj).then(res => {
          this.tableList = res.rows || []
          this.total = res.total || 0
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    },
    downloadFile() {
      const params = {
        ...this.queryForm,
        taskNo: this.$route.query.id,
        isExport: '1'
      }
      if (this.$route.query.flag == '1') {
        downLoadFile('/admin/iocTask/detail/export', params, `${this.$route.query.taskName}--任务明细--${moment(new Date()).format('YYYYMMDD')}.xlsx`)
      } else if (this.$route.query.flag == '2') {
        downLoadFile('/admin/iocTask/detail/exportRe', params, `${this.$route.query.taskName}--二次外呼明细--${moment(new Date()).format('YYYYMMDD')}.xlsx`)
      }
    },
    showAudo(val) {
      this.audoVisible = true
      this.fullAudioUrl = val
      window.setTimeout(() => {
        this.$refs.vueMiniPlayer.currentTime = 0
      }, 100)
    },
    sendHKLink(val, flag) {
      if (flag == '1') {
        console.log(val, 'cal')
        this.sendHKLinks = {
          taskDetailNos: val,
          taskNo: this.$route.query.id,
          queryType: this.$route.query.flag == '1' ? '0' : '1'
        }
        this.sendVisible = true
      } else if (flag == '2') {
        this.sendVisible = true
        this.sendHKLinks = {
          taskNo: this.$route.query.id,
          taskDetailNos: this.multipleSelection.map(item => item.taskDetailNo).toString(),
          queryType: this.$route.query.flag == '1' ? '0' : '1'
        }
      }
    },
    reAdd(arr) {
      let taskDetailNos = arr.map(item => item.taskDetailNo).toString()
      sendWxAdd({taskDetailNos, taskNo: this.$route.query.id}).then(res => {
        if (res.code == 200) {
          this.getListFn();
          this.$message.success(res.msg)
        } else this.$message.error(res.msg)
      })
    },
    // 确认发送
    submitSend() {
      console.log(this.sendHKLinks, 'this')
      sendHkLink(this.sendHKLinks).then(res => {
        this.$message.success('推送成功')
        this.sendVisible = false
      }).catch()
    },
    beforeCloseDialog() {
      this.$refs.vueMiniPlayer.pause()
      this.audoVisible = false
      this.fullAudioUrl = ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.page-title {
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2A2A2A;
}

::v-deep.el-tag-1 {
  background: rgba(255, 173, 58, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid #FFAD3A !important;
  color: #FFAD3A !important;
}

::v-deep.el-tag-2 {
  background: rgba(252, 88, 48, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid #082aff !important;
  color: #082aff !important;
}

::v-deep.el-tag-3 {
  background: rgba(153, 153, 153, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(204, 204, 204, 0.2) !important;
  color: #999999 !important;
}

::v-deep.el-tag-4 {
  background: rgba(242, 48, 49, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(242, 48, 49, 0.1) !important;
  color: #F23031 !important;
}

::v-deep.el-tag-5 {
  background: rgba(20, 213, 149, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(20, 213, 149, 0.1) !important;
  color: #14D595 !important;
}

::v-deep.el-tag-1 {
  background: rgba(153, 153, 153, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(204, 204, 204, 0.2) !important;
  color: #999999 !important;
}

::v-deep.el-tag-2 {
  background: rgba(255, 173, 58, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 173, 58, 0.1) !important;
  color: #FFAD3A !important;
}

::v-deep.el-tag-3 {
  background: rgba(20, 213, 149, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(20, 213, 149, 0.1) !important;
  color: #14D595 !important;
}

::v-deep.el-tag-4 {
  background: rgba(252, 88, 48, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(252, 88, 48, 0.1) !important;
  color: #082aff !important;
}
</style>
